<script setup>
import { ElMessage } from 'element-plus'
import { ref, onBeforeUnmount } from 'vue'
import Player from 'xgplayer'
import HlsPlugin from 'xgplayer-hls'

import {
  closeCameraStream,
  openCameraStream,
} from '@/api/manager/dataManage/deviceManage'

const emit = defineEmits(['close'])

let player = null

const title = ref('')

const meta = ref(null)

const loading = ref(false)

const setMetaData = (data) => {
  meta.value = data
  // console.log('meta', meta.value)

  if (meta.value.nickName) {
    title.value = meta.value.nickName
  } else {
    title.value = '实时视频'
  }

  if (meta.value.hls) {
    initPlayer(meta.value.hls)
  } else {
    handleNormalMonitor()
  }
}

const handleNormalMonitor = () => {
  loading.value = true
  openCameraStream(meta.value.id)
    .then((res) => {
      if (res.success) {
        const url = `${window.VIDEO_BASE_URL}/hls/${meta.value.id}/hls.m3u8`
        initPlayer(url)
      } else {
        ElMessage.error(res.message || '获取视频流失败')
      }
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

const initPlayer = (url) => {
  player = new Player({
    id: 'screen-live-video',
    url: url,
    width: '100%',
    height: '100%',
    autoplay: true,
    autoplayMuted: true,
    fitVideoSize: 'fixed',
    videoFillMode: 'contain',
    isLive: false,
    plugins: [HlsPlugin],
  })
}

const onClose = () => {
  emit('close')

  try {
    player?.destroy()
  } catch (error) {
    console.error('player destroy failed', error)
  }
  player = null

  if (!meta.value.hls) {
    closeCameraStream(meta.value.id)
  }

  meta.value = null
}

onBeforeUnmount(() => {
  if (meta.value && !meta.value.hls) {
    closeCameraStream(meta.value.id)
  }
})

defineExpose({
  setMetaData,
})
</script>

<template>
  <div class="monitor-player">
    <div class="monitor-player-content">
      <div class="content-header">
        <span class="title">{{ title }}</span>
        <div class="close" @click="onClose"></div>
      </div>

      <div class="content-main">
        <div
          v-loading="loading"
          id="screen-live-video"
          class="video-wrapper"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss" src="@/assets/styles/common.scss"></style>
<style scoped lang="scss">
.monitor-player {
  z-index: 3333;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;

  &-content {
    width: 970px;
    height: 650px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('@/assets/imgs/dispatch_bg.png');
    position: relative;

    .content-header {
      position: absolute;
      left: 25px;
      top: 38px;
      right: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        padding: 0 4px;
        font-size: 20px;
        font-weight: 400;
        font-family: YouSheBiaoTiHei;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .close {
        width: 16px;
        height: 16px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url('@/assets/imgs/ic_gb_dialog.png');
        cursor: pointer;
      }
    }

    .content-main {
      width: 100%;
      height: 100%;
      padding: 90px 30px 40px;
      display: flex;
      flex-direction: column;

      .video-wrapper {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
